<template>
  <!-- { 'nav-current': index === curIdx } -->
  <!-- :class="['nav-item', { 'nav-current': index === tabIndex }]" -->
  <div class="nav-item" @click="changeTabIndex(index)">
    {{ item | replaceNumToChs }}
  </div>
</template>

<script>
//导入state对象
//导入mutations对象
// import { mapState, mapMutations } from "vuex";
import { replaceNumToChs } from "../../../filters/index";

export default {
  name: "NavItem",
  props: {
    index: Number,
    item: String,
    // curIdx: Number,
  },
  // computed: {
  //   //把state对象里的属性数据拿出来
  //   //展开执行出来的结果
  //   ...mapState(["tabIndex"]),
  // },
  filters: {
    //注册
    replaceNumToChs,
  },
  methods: {
    // ...mapMutations(["changeTabIndex"]),
    changeTabIndex(index) {
      this.$emit("changeTabIndex", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-item {
  float: left;
  width: 25%;
  height: 50px;
  text-align: center;
  line-height: 50px;

  &.nav-current {
    background-color: #000;
    color: #fff;
  }
}
</style>